<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ include file="/common/taglib.jsp"%>
<%@ taglib prefix="validator"
	uri="http://www.springmodules.org/tags/commons-validator"%>
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title><spring:message code="main.title"/></title>
<link href="/css/reset.css" type="text/css" rel="stylesheet" />
<link href="/css/common.css" type="text/css" rel="stylesheet" />
<link href="/css/layout.css" type="text/css" rel="stylesheet" />
<link href="/css/ui.css" type="text/css" rel="stylesheet" />
<script src="/js/jquery.min.js"></script>
<script src="/js/jquery-ui-1.10.4.custom.min.js" type="text/javascript"></script>
<script src="/js/left_menu.js" type="text/javascript"></script>
<script src="/js/ui.js" type="text/javascript"></script>
<validator:javascript formName="adminContentsVO"
	staticJavascript="false" xhtml="true" cdata="false" />
<style type="text/css" media="all">
#wrapper {
	position: absolute;
	z-index: 1;
	top: 50px;
	bottom: 0px;
	left: 0;
	width: 100%;
	overflow: auto;
}
</style>
<!--[if lt IE 9]>
<script type="text/javascript" src="js/respond.min.js"></script>
<![endif]-->
<script type="text/javascript" src="<c:url value="/validator.do"/>"></script>
<script type="text/javascript" src="<c:url value="/ckeditor/ckeditor.js" />"></script>
<script src="/js/gnb_ui.js" type="text/javascript"></script>
<script>
	//댑스별 메뉴 활성화
	var navCurrentParam1 = ${boardInfo.boardId};//1depth
	var navCurrentParam2 = 0;//2depth
	var navCurrentParam3 = 0;//3depth
</script>	
<script type="text/javascript">
	var boardTypeCd = "${boardInfo.boardTypeCd}";
	$(document).ready(function() {
		
		$('.search').schSelect();
		
		navigation("gnb_wrap", "slide");
		
		$( "#keyword" ).bind("keypress", function( event ) {
			  if ( event.which == 13 ) {
				  searchWithinResults();
			  }
		});
		
		$( "#searchButton" ).click(function( event ) {
			searchWithinResults();
		});
		var config = {
				"height" : "320px",
				"filebrowserBrowseUrl" : "/ckfinder\/ckfinder.html",
				"filebrowserImageBrowseUrl" : "/ckfinder\/ckfinder.html?type=Images",
				"filebrowserFlashBrowseUrl" : "/ckfinder\/ckfinder.html?type=Flash",
				"filebrowserWindowHeight" : "800",
				"filebrowserUploadUrl" : "/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Files",
				"filebrowserImageUploadUrl" : "/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Images",
				"filebrowserFlashUploadUrl" : "/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Flash",
				"filebrowserWindowWidth" : "1000"
		};
		CKEDITOR.replace('contentsDesc',config);
		
		
					
	});

	//목록
	function fncList() {
		window.location.href = "/board/contentsList.do?boardId=${boardInfo.boardId}";
	}

	//상세폼
	function fncSave() {
		var form = document.adminContentsVO;
		var mapChk = true;
		if(boardTypeCd == "02") {
			if($("#contentsCategoryCd").val() == "") {
				alert("지역을 선택하세요.");
	        	mapChk = false;
			}
			$("[name='themeMapChk']").each(function (index) {  
		        //value.push($(this).val());
		       	if($("[name='themeMap']")[index].value != "" && $("[name='themeMapTitle']")[index].value == "") {
		        	alert("주제도명을 입력하세요.");
		        	mapChk = false;
		        }
		       	if($("[name='themeMap']")[index].value == "" && $("[name='themeMapTitle']")[index].value != "") {
		        	alert("주제도 파일을 선택하세요.");
		        	mapChk = false;
		        }
		       	if(!mapChk) return false;
		 	});
			
			if(!mapChk) return false;
		}
		
		if($("#writerNm").val() == "") {
			$("#writerNm").val("${adminName}");
		}
		
		var oEditor = CKEDITOR.instances.contentsDesc;
		var htmlData = "";
		if (oEditor.mode == 'wysiwyg') {
			htmlData = oEditor.getData();
		}
		form.contentsDesc.value = htmlData;
		
		if (validateAdminContentsVO(form)) {
			if (form.contentsSeq.value == 0) {
				if((boardTypeCd == "01" || boardTypeCd == "02") && form.titleImg.value == "") {
					alert("썸네일이미지를 선택하세요.");
					return false;
				}
				form.action = "/admin/insertContents.do";
			} else {
				if((boardTypeCd == "01" || boardTypeCd == "02") && (typeof $("#titleImg").html() == "undefined" && form.titleImg.value == "")) {
					alert("썸네일이미지를 선택하세요.");
					return false;
				}
				form.action = "/admin/updateContents.do";
			}
			form.submit();
		}
		
	}

	function fncMapAdd() {
		var len = $("#themeMapList").find("li").length;
		$("#themeMapList").append("<li id=\"map"+len+"\"><input type=\"checkbox\" name=\"themeMapChk\" value=\"map"+len+"\" /> <input type=\"text\" class=\"multi\" name=\"themeMapTitle\" \/> : <input type=\"file\" class=\"multi\" name=\"themeMap\" \/><\/li>");
		$("[name='themeMap']").unbind("change");
		$("[name='themeMap']").bind("change", function (evt) {
			
			var files = evt.target.value.split("\\");
			var fileName = files[files.length -1];
			var idx = fileName.lastIndexOf(".");
			if(idx > -1) {
				fileName = fileName.substring(0, idx);
			}
			$(evt.target).parent().find("[name='themeMapTitle']").val(fileName);
			
		});
	}
	
	function fncMapDel() {
		$("[name='themeMapChk']:checked").each(function (index) {  
	        //value.push($(this).val());
	        $(this).parent().remove();
	 	}); 
	}
	
	function fncDelFile(id) {
		$("#"+id).remove();
	}
	
	
	function fncChangeArea1() {
		$("#contentsCategoryCd").val($("#region1 option:selected").val());
		$("#contentsNm").val($("#region1 option:selected").text());
		fncChangeArea("region2", $("#contentsCategoryCd").val());
		$("#region3").html("<option value=''>선택</option>");
	}

	function fncChangeArea2() {
		$("#contentsCategoryCd").val($("#region2 option:selected").val());
		$("#contentsNm").val($("#contentsNm").val() + " " + $("#region2 option:selected").text());
		fncChangeArea("region3", $("#contentsCategoryCd").val());
	}

	function fncChangeArea3() {
		$("#contentsCategoryCd").val($("#region3 option:selected").val());
		$("#contentsNm").val($("#contentsNm").val() + " " + $("#region3 option:selected").text());
	}
	
	function fncChangeArea(cNm, areaCd) {
		$.getJSON('/item/changeArea.do?areaCd='+areaCd, function(data) {
			var resultList = data.regionList;
			var itemListHtml = "";
			itemListHtml += "<option value=''>선택</option>";
			if(resultList.length > 0){
				for(var i = 0; i < resultList.length; i++) {
					var region = resultList[i];
					itemListHtml += "<option value=\""+region.codeId+"\">"+region.codeName+"</option>";
				}
			}
			$("#"+cNm).html(itemListHtml);
		});
	}
</script>
<c:set var="navCurrentParam1" value="${searchVO.boardId}" scope="request" />
</head>
<body>
	<div id="nahfWrap">
		<!-- Header -->
		<jsp:include page="../common/header.jsp"></jsp:include>
		<!--// Header -->
		<form:form commandName="adminContentsVO" name="adminContentsVO" method="post" enctype="multipart/form-data">
			<form:hidden path="boardId" />
			<form:hidden path="contentsGroupId" />
			<form:hidden path="contentsSeq" />
			<form:hidden path="contentsDepth" />
			<form:hidden path="writerNm" title="${writerNm}" />
			<form:hidden path="password" title="${password }" />
			<form:hidden path="email" title="${email}" />
			<form:hidden path="contentsCategoryCd" />
			<!-- Content -->

			<!-- 컨텐츠 -->
			<div id="container" class="bg_sub">
				<div class="sub_wrap">
					<!-- 내용영역 -->
					<div class="sub_content">
						<div class="left_menu">
							<c:if test="${boardInfo.boardId gt 2}">
								<h2>
									<img src="/img/leftMenu7.png" alt="참여서비스" />
								</h2>
							</c:if>
							<c:if test="${boardInfo.boardId lt 3}">
								<h2>
									<img src="/img/leftMenu6.png" alt="시청각자료" />
								</h2>
							</c:if>
							<!-- left 메뉴 -->
							<div id="left">
								<c:if test="${boardInfo.boardId gt 2}">
									<ul class="navmenu navmenu7">
										<li class="nvparam3"><a
											href="/board/contentsList.do?boardId=3">공지사항</a></li>
										<li class="nvparam4"><a
											href="/board/contentsList.do?boardId=4">묻고답하기</a></li>
									</ul>
								</c:if>
								<c:if test="${boardInfo.boardId lt 3}">
									<ul class="navmenu navmenu6">
										<li class="nvparam1"><a
											href="/board/contentsList.do?boardId=1">추천컨텐츠</a></li>
										<li class="nvparam2"><a
											href="/board/contentsList.do?boardId=2">지역정보</a></li>
									</ul>
								</c:if>
							</div>
							<!-- //left 메뉴 -->
						</div>
						<div class="sub_area">
							<!-- 서브 네비게이션 -->
							<ul class="sub_navi">
								<li><a href="/"><img src="/img/sub_navi1.gif"
										alt="home" /></a></li>
								<li><a href="#"><c:if test="${boardInfo.boardId gt 2}">참여 서비스</c:if>
										<c:if test="${boardInfo.boardId lt 3}">시청각 자료</c:if></a></li>
								<li class="sel_navi">
									<a href="/board/contentsList.do?boardId=${boardInfo.boardId }">${boardInfo.boardNm}</a>
								</li>
							</ul>
							<!-- //서브 네비게이션 -->
							<div class="sub_tit">
								<c:if test="${searchVO.boardId eq '01'}">
									<h3>
										<img src="/img/subMenu_tit11.gif" alt="공지사항" />
									</h3>
								</c:if>
								<c:if test="${searchVO.boardId eq '02'}">
									<h3>
										<img src="/img/subMenu_tit10.gif" alt="묻고 답하기" />
									</h3>
								</c:if>
							</div>
							<!-- 내용 -->
							<div class="mr37 ">
								<!-- 리스트 목록 -->
								<div class="tb_sch_list">
									<table>
										<colgroup>
											<col width="20%" />
											<col width="60%" />
											<col width="20%" />
										</colgroup>
										<tbody>
											<c:if test="${boardInfo.boardTypeCd eq '02'}">
											<tr>
												<th scope="row">지역</th>
												<td colspan="2">
													<!-- 첫번째 -->
													<select class="bg_sel" style="width:80px;" id="region1" onchange="fncChangeArea1()">
														<option value="">선택</option>
														<c:forEach var="region" items="${regionList}">
															<option value="${region.codeId }" ${region.codeId eq fn:substring(adminContentsVO.contentsCategoryCd,0,4) ? "selected='selected'" : ''}>${region.codeName }</option>	
														</c:forEach>
													</select>
													<!-- //첫번째 -->
													<!-- 두번째 -->
													<select style="width:80px;"  id="region2" onchange="fncChangeArea2()">
														<option value="">선택</option>
														<c:forEach var="region" items="${regionList2}">
															<option value="${region.codeId }" ${region.codeId eq fn:substring(adminContentsVO.contentsCategoryCd,0,7) ? "selected='selected'" : ''}>${region.codeName }</option>	
														</c:forEach>
													</select>
													<!-- //두번째 -->
													<!-- 세번째 -->
													<select style="width:80px;"  id="region3" onchange="fncChangeArea3()">
														<option value="">선택</option>
														<c:forEach var="region" items="${regionList3}">
															<option value="${region.codeId }" ${region.codeId eq adminContentsVO.contentsCategoryCd ? "selected='selected'" : ''}>${region.codeName }</option>	
														</c:forEach>
													</select>
													<!-- //세번째 -->
												</td>
											</tr>
											</c:if>
											<tr>
												<th scope="row">제목</th>
												<td colspan="2"><form:input path="contentsNm"
														title="${contentsNm}" class="it419"
														placeholder="${titleMsg}" /></td>
											</tr>
											<tr>
												<th scope="row">첨부파일</th>
												<td colspan="2">
													<c:forEach items="${adminContentsVO.attachFileList}" varStatus="i">
														<c:if test="${adminContentsVO.attachFileList[i.index].attachFileTypeCd eq '04' }" >
														<ul id="attach">
														<li>
															${adminContentsVO.attachFileList[i.index].attachFileOriginNm}  <input type="image" src="/img/uploadify-cancel.png" alt="파일 삭제" onclick="fncDelFile('attach')"/>
															<form:hidden path="attachFileList[${i.index }].contentsId"/>
															<form:hidden path="attachFileList[${i.index }].attachFileSeq"/>
															<form:hidden path="attachFileList[${i.index }].attachFileTypeCd"/>
															<form:hidden path="attachFileList[${i.index }].attachFileNm"/>
															<form:hidden path="attachFileList[${i.index }].attachFileOriginNm"/>
															<form:hidden path="attachFileList[${i.index }].attachFilePath"/>
															<form:hidden path="attachFileList[${i.index }].attachFileDesc"/>
															</li>
															</ul>
														</c:if>
													</c:forEach>
													
													<input type="file" class="multi" name="attachFile" class="it419" />
												</td>
											</tr>
											<tr>
												<th scope="row">썸네일</th>
												<td colspan="2">
													
													<c:forEach items="${adminContentsVO.attachFileList}" varStatus="i">
														<c:if test="${adminContentsVO.attachFileList[i.index].attachFileTypeCd eq '03' }" >
														<ul id="titleImg">
														<li>
															${adminContentsVO.attachFileList[i.index].attachFileOriginNm}  <input type="image" src="/img/uploadify-cancel.png" alt="파일 삭제" onclick="fncDelFile('titleImg')"/>
															<form:hidden path="attachFileList[${i.index }].contentsId"/>
															<form:hidden path="attachFileList[${i.index }].attachFileSeq"/>
															<form:hidden path="attachFileList[${i.index }].attachFileTypeCd"/>
															<form:hidden path="attachFileList[${i.index }].attachFileNm"/>
															<form:hidden path="attachFileList[${i.index }].attachFileOriginNm"/>
															<form:hidden path="attachFileList[${i.index }].attachFilePath"/>
															<form:hidden path="attachFileList[${i.index }].attachFileDesc"/>
														</li>
														</ul>
														</c:if>
													</c:forEach>
													<input type="file" class="multi" name="titleImg" />
												</td>
											</tr>
											<c:if test="${boardInfo.boardTypeCd eq '02'}">
												<tr>
													<th scope="row" style="padding-top :15px; vertical-align: top;">주제도</th>
													<td>
														<c:forEach items="${adminContentsVO.attachFileList}" varStatus="i">
															<c:if test="${adminContentsVO.attachFileList[i.index].attachFileTypeCd eq '01' }" >
															<ul id="existingThemeMap${i.index}" style="line-height: 22px;" >
															<li>
																<a href="">${adminContentsVO.attachFileList[i.index].attachFileOriginNm}</a> <input type="image" src="/img/uploadify-cancel.png" alt="파일 삭제" onclick="fncDelFile('existingThemeMap${i.index}')"/>
																<form:hidden path="attachFileList[${i.index }].contentsId"/>
																<form:hidden path="attachFileList[${i.index }].attachFileSeq"/>
																<form:hidden path="attachFileList[${i.index }].attachFileTypeCd"/>
																<form:hidden path="attachFileList[${i.index }].attachFileNm"/>
																<form:hidden path="attachFileList[${i.index }].attachFileOriginNm"/>
																<form:hidden path="attachFileList[${i.index }].attachFilePath"/>
																<form:hidden path="attachFileList[${i.index }].attachFileDesc"/>
															</li>
															</ul>	
															</c:if>
														</c:forEach>
														
														<ul id="themeMapList">
															<li id="map0"><input type="checkbox"
																name="themeMapChk" value="map1" /> <input type="text"
																class="multi" name="themeMapTitle" /> : <input
																type="file" class="multi" name="themeMap" /></li>
														</ul>
													</td>
													<td style="vertical-align: top;margin-top: 15px"><a href="javascript:fncMapAdd()"
														class="btn_list_view"><span>추가</span></a> <a
														href="javascript:fncMapDel()" class="btn_list_view"><span>삭제</span></a></td>
												</tr>
											</c:if>
											<tr>
												<td scope="row" colspan="3">
													<div class="editor">
														<form:textarea path="contentsDesc" rows="30" cols="115"
															title="${contentsDesc}" placeholder="${contentsMsg}"></form:textarea>
													</div>
												</td>
											</tr>
										</tbody>
									</table>
								</div>
								<!-- //리스트 목록 -->
								<!-- 버튼 -->
								<div class="btn_area">
									<div class="t_center">
										<a href="javascript:fncSave()" class="btn_list_view"><span>확인</span></a>
										<a href="/board/contentsList.do?boardId=${boardInfo.boardId }"
											class="btn_list_view"><span>목록</span></a>
									</div>
								</div>
								<!-- //버튼 -->
							</div>
							<!-- //내용 -->
						</div>
					</div>
					<!-- //내용영역 -->
				</div>
			</div>
			<!-- //컨텐츠 -->
			<!--// Content -->

		</form:form>
		<!--// Content -->

		<jsp:include page="../common/footer.jsp"></jsp:include>
	</div>
</body>
</html>